<template>
  <div>
    <form @submit.prevent="add()">
      <div v-for="(item, index) in stages" :key="index">
        <div class="mb-3 row">
          <label for="inputPassword" class="col-sm-2 col-form-label"
            >阶段名称</label
          >
          <div class="col-sm-10">
            <input
              type="text"
              class="form-control"
              v-model="item.stname"
              required="required"
            />
          </div>
        </div>
        <div class="mb-3 row">
          <label for="inputPassword" class="col-sm-2 col-form-label"
            >所属学科</label
          >
          <div class="col-sm-10">
            <el-select v-model="item.subject.id" placeholder="请选择">
              <el-option
                v-for="item in subjects"
                :key="item.id"
                :label="item.sname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <el-button
          v-if="index != 0"
          @click="removeIdx(item, index)"
          type="danger"
          >删除此条</el-button
        >
        <hr />
      </div>
      <button @click="addForm" class="btn btn-info">添加表单</button>
      &nbsp;&nbsp;&nbsp;
      <button type="submit" class="btn btn-success">提交</button>
      &nbsp;&nbsp;&nbsp;
      <router-link to="/stage/list" class="btn btn-secondary">返回</router-link>
    </form>
  </div>
</template>

<script>
export default {
  name: "StageBatchAdd",
  data() {
    return {
      stname: "",
      subjects: [],
      stages: [
        {
          stname: "",
          subject: {
            id: "",
          },
        },
      ],
    };
  },
  methods: {
    add() {
      this.axiosJSON
        .post("/stage/batchAdd", { stages: this.stages })
        .then((result) => {
          if (result.data.code == 0) {
            this.$message({
              message: result.data.msg,
              type: "success",
            });
            this.$router.push("/stage/list"); //编程方式跳转到阶段列表组件
          } else {
            this.$message.error({
              message: result.data.msg,
            });
          }
        });
    },
    getSubject() {
      this.axiosJSON.post("/subject/getAllWithoutPage").then((result) => {
        this.subjects = result.data.data;
      });
    },
    //   添加操作
    addForm() {
      // 定义一个标识，通过标识判断是否能添加信息
      let statusType = true;
      this.stages.forEach((item) => {
        if (item.stname == "" || item.subject.id == "") {
          this.$message({
            message: "请完善信息后在添加",
            type: "warning",
          });
          statusType = false;
        }
      });
      if (statusType) {
        this.stages.push({
          stname: "",
          subject: {
            id: "",
          },
        });
      }
    },
    // 删除操作
    removeIdx(item, index) {
      this.stages.splice(index, 1);
      this.$message({
        message: "删除成功",
        type: "success",
      });
    },
  },
  mounted() {
    this.$parent.stageTitle = "阶段批量增加";
    this.getSubject();
  },
};
</script>

<style>
</style>
